<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    
    <!-- <script src="d3.min.js"></script> -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
        const domain = [11,248];
        const range = [100,800];


        const x = d3.scaleLinear(domain,range).nice();
        const ticks = x.ticks(10);


        const svg = d3.select('body').append('svg');
        svg.attr('width',1000);
        svg.attr('height',500);
        svg.append('line')
            .attr('x1',x(ticks[0]))
            .attr('y1',100)
            .attr('x2',x(ticks[ticks.length-1]))
            .attr('y2',100)
            .attr('stroke','#000');

        ticks.forEach((e,i) => {
            svg.append('line')
            .attr('x1',x(ticks[i]))
            .attr('y1',100)
            .attr('x2',x(ticks[i]))
            .attr('y2',110)
            .attr('stroke','#ccc');


            svg.append('text')
                .attr('x',x(ticks[i]))
                .attr('y',120)
                .text(ticks[i])
                .attr('text-anchor','middle')
                .attr('dominant-baseline','middle')
                .attr('stroke','#000')
                .attr('font-size',10);
        });    

    </script>
    <svg>
        <text text-anchor="" dominant-baseline=""></text>
    </svg>
</body>
</html>